<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!-- 这里的 .. 表示当前路径的上一级路径  -->
        <link rel="stylesheet" href="../font-awesome/css/font-awesome.css">
        <!-- 导入栅格系统 (我们自己建立的 尚有缺陷 的栅格系统 ) -->
        <link rel="stylesheet" href="cells.css" >

        <style type="text/css" >
            body { margin: 0 ; padding: 0 ; }
            .wrapper { width: 100% ; padding: 25px 0 ; background-color: #eaeaea;  }
            /* 亲子选择器:  父元素>子元素，表示仅选择 某些父元素的直接子元素，注意不选择间接子元素 */
            .wrapper>.row { width: 1226px ; margin: auto ;  }
            .phone { background-color: #ff7314 ; height: 50px ;  }
            .link { background-color: #ff7314 ; height: 50px ;  }
            .icon {
                display: inline-block ; width: 20px ; height: 20px ; line-height: 20px ; text-align: center ;
                border-radius: 50% ;
                background-color: #ff7314;
            }

            /* 为父元素显式指定高度后，取消 overflow : visible ; */
            .container { overflow: visible ; height: 614px ;  }

            /* 亲子选择器 选择 .container 元素的直接子元素 */
            .container>div {
                height: 614px ;
            }

            .container .mix a {
                display: block ;
                width: 234px ;
                height: 614px ;
                background-image: url("mix-alpha.jpg");
                background-repeat: no-repeat ;
                background-size: cover ;
            }

            .container .mix a:hover {
                margin-top: -5px;
                box-shadow: 0 0 15px 10px rgba(238, 16, 0, 0.75);
            }

            .items { height: 614px ; /* 与左边的 mix-alpha 区域高度相同 */ }

            .item {
                height: 307px ;
                box-shadow: 0 0  0 1px red inset ; /* 使用内部阴影而不是使用边框 */
            }

        </style>

    </head>
    <body>

        <div class="wrapper">
            <div class="row title">
                <div class="cells-12-2 phone">手机</div>
                <div class="cells-12-2 offset-12-8 link">
                    <a href="">
                        查看全部
                        <!-- fa-chevron-circle-right -->
                        <i class="fa fa-angle-right icon"></i>
                    </a>
                </div>
            </div>
            <div class="row container">
                <div class="cells-5-1 mix">
                    <a href=""></a>
                </div>
                <!-- 注意这里的 items 区域既是 .container 的右边占 4 格的区域，也是一个容器，其内部要划分为 4 格列 -->
                <div class="cells-5-4 items row" >
                    <div class="item cells-12-3"></div>
                    <div class="item cells-12-3"></div>
                    <div class="item cells-12-3"></div>
                    <div class="item cells-12-3"></div>
                    <div class="item cells-12-3"></div>
                    <div class="item cells-12-3"></div>
                    <div class="item cells-12-3"></div>
                    <div class="item cells-12-3"></div>
                </div>
            </div>
        </div>
        
    </body>
</html>